<template>
    <div class="bilibili-player">
        <h2>Video Player</h2>
        <button @click="loadVideo">Load Video</button>
        <div v-if="embeddedUrl" class="video-container">
            <iframe :src="embeddedUrl" frameborder="0" allowfullscreen
                sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
        </div>
    </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
    name: 'BilibiliPlayer',
    setup() {
        const videoUrl = ref('');
        const embeddedUrl = ref('');

        const loadVideo = () => {
            const videoId = extractVideoId('https://www.bilibili.com/video/BV1du411M78t/?spm_id_from=333.999.0.0');
            if (videoId) {
                embeddedUrl.value = `https://player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1&danmaku=0`;
            } else {
                alert('Invalid Bilibili video URL. Please enter a valid URL.');
            }
        };

        const extractVideoId = (url) => {
            const match = url.match(/\/video\/([^\/\?]+)/);
            return match ? match[1] : null;
        };

        return {
            videoUrl,
            embeddedUrl,
            loadVideo
        };
    }
};
</script>

<style scoped>
.bilibili-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

input {
    margin-bottom: 10px;
    padding: 5px;
    width: 300px;
}

button {
    margin-bottom: 10px;
    padding: 5px 10px;
}

.video-container {
    width: 800px;
    height: 450px;
}

iframe {
    width: 100%;
    height: 100%;
}
</style>